<template>
  <div>
    <!-- 已完成 2018/3/7 11:44 zhangQ -->
    <Row style="margin-top: 15px;">
      <i-col span="24">
        <Table :columns="subOrderColumn" border :data="completeData" height="600"></Table>
        <xlinkModal v-model="operatModal.viewTackOutDetailList" title="查看详情" width="1200">
          <viewTackOutDetail v-if="operatModal.viewTackOutDetailList"
                             :params="viewTackOutDetailListParams"></viewTackOutDetail>
        </xlinkModal>
      </i-col>
    </Row>
  </div>
</template>

<script>
  import {getTrainTypeCN} from './trainTypeEnum'
  import {mapGetters} from 'vuex'
  import xlinkModal from '@components/modal/xlinkModal'
  import viewTackOutDetail from './viewTackOutDetail'

  export default {
    name: 'complete',
    data () {
      let subOrderColumn = [
        {
          type: 'index',
          width: 60
        },
        {
          title: '火车车种类型',
          ellipsis: 'false',
          width: 150,
          render: (h, params) => {
            let trainType = params.row.trainType
            let trainTypeCN = getTrainTypeCN(trainType)
            return (<span>{trainTypeCN}</span>)
          }
        },
        {
          title: '掏箱',
          ellipsis: 'false',
          width: 100,
          render: (h, params) => {
            let state = '非掏箱'
            // console.log(params.row.takeOutContainerState)
            if (params.row.takeOutContainerState === 1) {
              state = '掏箱'
            }
            return (<span>{state}</span>)
          }
        },
        {
          title: '箱号',
          ellipsis: 'false',
          width: 150,
          key: 'containerNo'
        },
        {
          title: '发货人',
          ellipsis: 'false',
          key: 'receiver',
          width: 250
        },
        {
          title: '收货人',
          ellipsis: 'false',
          key: 'shipper',
          width: 250
        },
        {
          title: '司机',
          ellipsis: 'false',
          key: 'driverId',
          width: 200,
          render: (h, params) => {
            return (<span>{params.row.driverName}</span>)
          }
        },
        {
          title: '送货地址',
          ellipsis: 'false',
          width: 200,
          key: 'outAddress'
        },
        {
          title: '联系人',
          ellipsis: 'false',
          width: 100,
          key: 'outContacts'
        },
        {
          title: '联系人电话',
          ellipsis: 'false',
          width: 150,
          key: 'outMobile'
        },
        {
          title: '品名',
          ellipsis: 'false',
          key: 'pm',
          width: 150
        },
        {
          title: '接取费(元)',
          ellipsis: 'false',
          key: 'receiveFee',
          width: 120
        },
        {
          title: '送达费(元)',
          ellipsis: 'false',
          key: 'deliverFee',
          width: 120
        },
        {
          title: '状态',
          ellipsis: 'true',
          width: 100,
          key: 'state',
          render: (h, params) => {
            let state = params.row.state
            if (state === 6) {
              return (<span>已完成</span>)
            } else if (state === 5) {
              return (<span style="color:green">配送中</span>)
            } else if (state === 4) {
              return (<span style="color:green">卸货中</span>)
            } else if (state === 2 || state === 3) {
              return (<span style="color:green">已派单</span>)
            } else if (!state === 1) {
              return (<span style="color:red">待配送</span>)
            } else {
              return ''
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 250,
          render: (h, params) => {
            let voucherImg = params.row.voucherImg
            console.log(params.row)
            let viewImg = (<i-button size="small" style="margin-right: 5px;">图片查看</i-button>)
            let showTakeOutCon = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.handleTakeOutList(params.row)}>掏箱历史纪录查询</i-button>)
            if (voucherImg) {
              viewImg = (<i-button type="primary" size="small" style="margin-right: 5px;" onClick={() => this.viewDetailImgAction(params.row)}>图片查看</i-button>)
            }
            let btnArray = []
            powerUtil.contains('orderListUnfinishedFleet') && btnArray.push(viewImg)
            if (params.row.takeOutContainerState === 1) {
              btnArray.push(showTakeOutCon)
            }
            return (btnArray)
          }
        }
      ]
      let viewTackOutDetailListParams = {}
      let operatModal = {
        viewTackOutDetailList: false
      }
      let datas = {subOrderColumn, viewTackOutDetailListParams, operatModal}
      return datas
    },
    props: {
      completeData: {
        type: Array,
        default () {
          return []
        }
      },
      currentMainOrder: {
        type: Object,
        default () {
          return {}
        }
      }
    },
    computed: {
      ...mapGetters(['currentToken', 'currentUser'])
    },
    methods: {
      viewDetailImgAction (row) {
        this.$emit('viewDetailImg', row)
      },
      handleTakeOutList (rows) {
        // 获取子运单
        // console.log(rows.subOrderId)
        // 获取车队号
        console.log(this.currentUser)
        let fleetId = this.currentUser.userId
        console.log(fleetId)
        this.viewTackOutDetailListParams.id = rows.subOrderId
        this.viewTackOutDetailListParams.fleetId = fleetId
        this.operatModal.viewTackOutDetailList = true
      }
    },
    created () {
    },
    mounted () {
    },
    components: {
      viewTackOutDetail, xlinkModal
    }
  }
</script>

<style scoped>

</style>
